<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速搭建局域网AI聊天助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 font-sans">
    <div class="flex min-h-screen">
        <!-- 侧边栏导航 -->
        <div class="w-64 bg-white shadow-md p-4 fixed h-full overflow-y-auto">
            <h1 class="text-xl font-bold text-gray-800 mb-6">AI聊天助手搭建指南</h1>
            <div class="space-y-2">
                <a href="#section1" class="block px-4 py-2 rounded-md hover:bg-gray-100 font-medium text-blue-600">一、安装Web服务器</a>
                <a href="#section1-1" class="block px-4 py-2 pl-8 rounded-md hover:bg-gray-100 text-gray-700">1. 安装Nginx</a>
                <a href="#section1-2" class="block px-4 py-2 pl-8 rounded-md hover:bg-gray-100 text-gray-700">2. 运行Nginx</a>
                <a href="#section1-3" class="block px-4 py-2 pl-8 rounded-md hover:bg-gray-100 text-gray-700">3. 停止/关闭Nginx</a>
                <a href="#section1-4" class="block px-4 py-2 pl-8 rounded-md hover:bg-gray-100 text-gray-700">4. 修改默认端口</a>
                
                <a href="#section2" class="block px-4 py-2 rounded-md hover:bg-gray-100 font-medium text-blue-600 mt-4">二、编写HTML页面</a>
                <a href="#section2-1" class="block px-4 py-2 pl-8 rounded-md hover:bg-gray-100 text-gray-700">1. 插件安装</a>
                <a href="#section2-2" class="block px-4 py-2 pl-8 rounded-md hover:bg-gray-100 text-gray-700">2. 让AI写网页</a>
                
                <a href="#section3" class="block px-4 py-2 rounded-md hover:bg-gray-100 font-medium text-blue-600 mt-4">三、API Key获取</a>
                
                <a href="#section4" class="block px-4 py-2 rounded-md hover:bg-gray-100 font-medium text-blue-600 mt-4">四、部署到Web服务器</a>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 ml-64 p-8">
            <div class="max-w-4xl mx-auto">
                <h1 class="text-3xl font-bold text-gray-800 mb-6">快速搭建局域网可用的AI聊天助手</h1>
                
                <!-- 一、安装Web服务器 -->
                <section id="section1" class="mb-12">
                    <h2 class="text-2xl font-semibold text-gray-700 mb-4">一、安装Web服务器（比如Nginx）</h2>
                    
                    <div id="section1-1" class="mb-8">
                        <h3 class="text-xl font-medium text-gray-700 mb-3">1. 安装Nginx</h3>
                        <p class="text-gray-600 mb-4">Nginx 是一个高性能的开源的 Web 服务器和反向代理服务器。别的Web服务器都可以使用。</p>
                        <p class="text-gray-600 mb-4"><a href="https://nginx.org/en/download.html" target="_blank" class="text-blue-500 hover:underline">Nginx官网下载</a></p>
                        <p class="text-gray-600 mb-4">选择 Stable version（稳定版本） 中的Windows版本下载，比如：nginx/Windows-1.26.3 下载</p>
                        <p class="text-gray-600 mb-4">如果有版本不兼容问题，就往前下载旧一点的版本。</p>
                    </div>
                    
                    <div id="section1-2" class="mb-8">
                        <h3 class="text-xl font-medium text-gray-700 mb-3">2. 运行Nginx</h3>
                        <p class="text-gray-600 mb-4">Nginx解压后目录结构说明：</p>
                        <div class="bg-gray-800 text-gray-100 p-5 rounded-lg shadow-md mb-4 font-mono text-sm overflow-x-auto">
                            <div class="flex">
                                <span class="text-blue-400">nginx/</span>
                            </div>
                            <div class="flex pl-4">
                                <span class="text-green-400">├── </span>
                                <span class="text-yellow-300">conf/</span>
                                <span class="text-gray-400 ml-8"># 存放配置文件的目录（配置文件：nginx.conf）</span>
                            </div>
                            <div class="flex pl-4">
                                <span class="text-green-400">├── </span>
                                <span class="text-yellow-300">html/</span>
                                <span class="text-gray-400 ml-8"># 默认的网页文件目录</span>
                            </div>
                            <div class="flex pl-4">
                                <span class="text-green-400">├── </span>
                                <span class="text-yellow-300">logs/</span>
                                <span class="text-gray-400 ml-8"># 存放日志文件的目录</span>
                            </div>
                            <div class="flex pl-4">
                                <span class="text-green-400">├── </span>
                                <span class="text-purple-300">nginx.exe</span>
                                <span class="text-gray-400 ml-4"># 运行程序文件</span>
                            </div>
                            <div class="flex pl-4">
                                <span class="text-green-400">└── </span>
                                <span class="text-gray-400">...</span>
                            </div>
                        </div>
                        <p class="text-gray-600">双击 nginx.exe 后即开启了 nginx。</p>
                        <p class="text-gray-600">通过 <code class="bg-gray-100 px-2 py-1 rounded text-red-500">http://[本机ip]</code> 即可以访问，默认是80端口。</p>
                        <p class="text-gray-600">看到页面上显示"Welcome to nginx!"即成功运行了。</p>
                    </div>
                    
                    <div id="section1-3" class="mb-8">
                        <h3 class="text-xl font-medium text-gray-700 mb-3">3. 停止/关闭 Nginx</h3>
                        <p class="text-gray-600 mb-4">在任务管理器中直接结束进程 nginx.exe。如果无法结束进程，那就用命令结束进程。</p>
                        <div class="bg-gray-800 text-gray-100 p-5 rounded-lg shadow-md mb-4 font-mono text-sm overflow-x-auto">
                            <div class="flex">
                                <span class="text-blue-400"># 方法一</span>
                            </div>
                            <div class="flex">
                                <span class="text-green-400"># 1.查看 nginx.exe 进程的PID号（可以直接查看任务管理器）</span>
                            </div>
                            <div class="flex">
                                <span class="text-purple-300">tasklist | findstr "nginx.exe"</span>
                            </div>
                            <div class="flex">
                                <span class="text-green-400"># 2.结束进程用 kill [PID]，比如查询结果有 7766, 29955两个</span>
                            </div>
                            <div class="flex">
                                <span class="text-purple-300">kill 7766</span>
                            </div>
                            <div class="flex">
                                <span class="text-purple-300">kill 29955</span>
                            </div>
                            <div class="flex">
                                <span class="text-blue-400"># 方法二，直接结束 nginx.exe 进程</span>
                            </div>
                            <div class="flex">
                                <span class="text-purple-300">taskkill /F /IM "nginx.exe"</span>
                            </div>
                            <div class="flex">
                                <span class="text-blue-400"># 使用命令启动/停止（需在该目录下用管理员身份运行以下命令）：</span>
                            </div>
                            <div class="flex">
                                <span class="text-blue-400"># 启动</span>
                            </div>
                            <div class="flex">
                                <span class="text-purple-300">start nginx.exe</span>
                            </div>
                            <div class="flex">
                                <span class="text-blue-400"># 停止</span>
                            </div>
                            <div class="flex">
                                <span class="text-purple-300">nginx.exe -s stop</span>
                            </div>
                            <div class="flex">
                                <span class="text-blue-400"># 查看nginx版本信息</span>
                            </div>
                            <div class="flex">
                                <span class="text-purple-300">nginx.exe -v</span>
                            </div>
                        </div>
                    </div>
                    
                    <div id="section1-4">
                        <h3 class="text-xl font-medium text-gray-700 mb-3">4. 修改默认80端口</h3>
                        <p class="text-gray-600 mb-4">在 conf 目录中有 nginx.conf 配置文件，第36行的80就是默认的监听端口，可以改成比如8080，8085，8090之类都可以，不要太小。</p>
                        <div class="bg-gray-800 text-gray-100 p-5 rounded-lg shadow-md mb-4 font-mono text-sm overflow-x-auto">
                            <div class="flex">
                                <span class="text-blue-400">...</span>
                            </div>
                            <div class="flex">
                                <span class="text-green-400">server {</span>
                            </div>
                            <div class="flex pl-4">
                                <span class="text-green-400">listen       80;</span>
                            </div>
                            <div class="flex pl-4">
                                <span class="text-green-400">server_name  localhost;</span>
                            </div>
                            <div class="flex">
                                <span class="text-green-400">...</span>
                            </div>
                        </div>
                        <p class="text-gray-600">修改完配置文件后需要重新启动。</p>
                    </div>
                </section>
                
                <!-- 二、编写html页面 -->
                <section id="section2" class="mb-12">
                    <h2 class="text-2xl font-semibold text-gray-700 mb-4">二、编写HTML页面</h2>
                    
                    <div id="section2-1" class="mb-8">
                        <h3 class="text-xl font-medium text-gray-700 mb-3">1. 插件安装</h3>
                        <p class="text-gray-600 mb-4">使用 VS Code类编辑器，现在可用：</p>
                        <ul class="list-disc pl-6 mb-4 text-gray-600">
                            <li class="mb-2">Trae：字节，目录免费使用DeepSeek和DouBao模型，<a href="https://www.trae.com.cn/" target="_blank" class="text-blue-500 hover:underline">官网下载</a></li>
                            <li class="mb-2">Cursor：支持DeepSeek API。<a href="https://www.cursor.com/cn/downloads" target="_blank" class="text-blue-500 hover:underline">官网下载</a></li>
                            <li class="mb-2">VS Code：微软，安装AI插件使用。<a href="https://code.visualstudio.com/download" target="_blank" class="text-blue-500 hover:underline">官网下载</a></li>
                        </ul>
                        <p class="text-gray-600 mb-2 font-medium">插件安装：</p>
                        <ul class="list-disc pl-6 text-gray-600">
                            <li class="mb-2">搜Chinese：使用简体中文语言包；</li>
                            <li class="mb-2">Python：需要使用Python的话；</li>
                            <li class="mb-2">通义灵码：阿里出的免费的AI编程助手；</li>
                            <li class="mb-2">Live Server：html页面预览功能的本地服务器。</li>
                        </ul>
                    </div>
                    
                    <div id="section2-2">
                        <h3 class="text-xl font-medium text-gray-700 mb-3">2. 让AI写网页</h3>
                        <p class="text-gray-600 mb-4">可以先直接让DeepSeek等工具写，写完了让到编辑器中继续让AI调整细节。</p>
                        <p class="text-gray-600 mb-4">html页面样式可以采用tailwind框架。</p>
                        <p class="text-gray-600 mb-4">举例：让AI写个聊天助手的页面。</p>
                        <div class="bg-gray-800 text-gray-100 p-5 rounded-lg shadow-md mb-4 font-mono text-sm overflow-x-auto">
                            <div class="flex">
                                <span class="text-yellow-400 font-medium">写一个html页面，tailwind框架，实现功能与AI进行聊天。把api key写在 config.json 文件中。页面上有"创建新对话"的按钮，有消息输入框，有"发送"按钮，当AI用流式回答的时候，"发送"按钮变成"停止"按钮，可以随时停止。与AI的聊天内容可以持续聊天。API 使用deepseek的api。</span>
                            </div>
                        </div>
                        <p class="text-gray-600">先把主要功能实现，然后样式和其它小功能的调整可以让AI编辑器来做。可以在编辑器中用Live Server插件打开html预览效果</p>
                    </div>
                </section>
                
                <!-- 三、 API Key获取 -->
                <section id="section3" class="mb-12">
                    <h2 class="text-2xl font-semibold text-gray-700 mb-4">三、 API Key获取</h2>
                    <p class="text-gray-600 mb-4">需要在 config.json 文件中填写 DeepSeek 或 SiliconFlow 的API key。</p>
                    
                    <div class="bg-white p-6 rounded-lg shadow mb-6">
                        <h3 class="text-xl font-medium text-gray-700 mb-3">1. DeepSeek的API：</h3>
                        <p class="text-gray-600 mb-4">需要注册后，创建API key。它家的key很便宜了。<a href="https://platform.deepseek.com/api_keys" target="_blank" class="text-blue-500 hover:underline">DeepSeek开放平台</a></p>
                    </div>
                    
                    <div class="bg-white p-6 rounded-lg shadow mb-6">
                        <h3 class="text-xl font-medium text-gray-700 mb-3">2. 硅基流动SiliconFlow的API：</h3>
                        <p class="text-gray-600 mb-4">注册后，创建API key就可以用了。<a href="https://cloud.siliconflow.cn/i/TI5qu71r" target="_blank" class="text-blue-500 hover:underline">SiliconFlow平台</a></p>
                        <p class="text-gray-600 mb-4">可以互相用邀请注册，双方都会赠送2000万Tokens（14元）。</p>
                        <p class="text-gray-600">它家是个模型工厂，别的模型都可以用。具体可以看<a href="https://docs.siliconflow.cn/cn/api-reference/chat-completions/chat-completions" target="_blank" class="text-blue-500 hover:underline">SiliconFlow API文档</a></p>
                    </div>
                    
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h3 class="text-xl font-medium text-gray-700 mb-3">3. AiHubMix的API：</h3>
                        <p class="text-gray-600">想体验 GPT模型、Claude、Gemini模型的可以尝试注册，国内的代理吧。像OpenAI这种会贵一点，这里用起来最便宜的是Gemini-2.0-flash系列。</p>
                        <p class="text-gray-600"><a href="https://aihubmix.com/models" target="_blank" class="text-blue-500 hover:underline">AiHubMix平台</a></p>
                    </div>
                </section>
                
                <!-- 四、把网页部署到Web服务器中 -->
                <section id="section4">
                    <h2 class="text-2xl font-semibold text-gray-700 mb-4">四、把网页部署到Web服务器中</h2>
                    <p class="text-gray-600 mb-4">然后把整个项目可以放到 Nginx 中的 html 目录下。其中 <code class="bg-gray-100 px-2 py-1 rounded text-red-500">index.html</code> 就是打开的首页的内容。</p>
                    <p class="text-gray-600 mb-4">html目录</p>
                    <div class="bg-gray-800 text-gray-100 p-5 rounded-lg shadow-md mb-4 font-mono text-sm overflow-x-auto">
                        <div class="flex">
                            <span class="text-blue-400">html/</span>
                        </div>
                        <div class="flex pl-4">
                            <span class="text-green-400">├── </span>
                            <span class="text-yellow-300">index.html</span>
                            <span class="text-gray-400 ml-8"># 首页文件</span>
                        </div>
                        <div class="flex pl-4">
                            <span class="text-green-400">├── </span>
                            <span class="text-yellow-300">chat.html</span>
                            <span class="text-gray-400 ml-8"># 新放进去的文件</span>
                        </div>
                        <div class="flex pl-4">
                            <span class="text-green-400">├── </span>
                            <span class="text-yellow-300">ai/</span>
                            <span class="text-gray-400 ml-8"># 新放进去的ai目录，里面有index.html 文件等</span>
                        </div>
                        <div class="flex pl-4">
                            <span class="text-green-400">└── </span>
                            <span class="text-gray-400">...</span>
                        </div>
                    </div>
                    <p class="text-gray-600">那要访问 chat.html 就用：<code class="bg-gray-100 px-2 py-1 rounded text-red-500">http://[本机ip]/chat.html</code> 访问；</p>
                    <p class="text-gray-600">要文件 ai 目录中的网页就用：<code class="bg-gray-100 px-2 py-1 rounded text-red-500">http://[本机ip]/ai/index.html</code> 访问。</p>
                </section>
            </div>
        </div>
    </div>

    <script>
        // 平滑滚动到锚点
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>